<script setup lang="ts">
import { ref, watch, reactive } from "vue";
import { Close, RefreshLeft, CircleClose } from "@element-plus/icons-vue";
import { useRoute } from "vue-router";
// import {  ClassTag } from "../../../types/index";
import { storeToRefs } from "pinia";
import useInfoStore from "@/stores";
const { userTag } = useInfoStore();
const { tagList } = storeToRefs(userTag);

const route = useRoute(); //路由数据对象

// 切换tag(不要贪图方便把此函数引用在addTag中，因为addTag不需要跳转)
const changeTag = (item: any): void => {
  userTag.changeTag(item);
};

// 删除tag
const closeTag = (index: number): void => {
  userTag.closeTag(index);
};
// 监听路由的切换
watch(route, (newValue) => {
  if ("index" !== newValue.matched[0].name) {
    return;
  }
  let index = -1;
  if ("edit" === route.name || "create" === route.name) {
    let openIndex = tagList.value.findIndex((item) => "list" === item.name);
    if (openIndex !== -1) {
      index = openIndex + 1;
    }
  }
  userTag.addTag(route, index);
});

userTag.addTag(route);

// 下拉菜单操作
const handleCommand = (command: { handle: string; index: number }): void => {
  eval(command.handle + "(" + command.index + ")");
};
// 刷新
const renovate = (index: number) => {
  userTag.renovate(index);
};
// 关闭标签页
const closeAllRightTab = (index: number) => {
  userTag.closeAllRightTab(index);
};
// 改变显示状态，隐藏所有下拉菜单
const showDropdown = () => {
  document.body.click();
};

const scrollbarRef = ref();
const tagBox = ref<HTMLElement>();
let scrollX = ref(0);
// 滚轮setScrollLeft
const scrollTag = (e: { wheelDelta: number }) => {
  if (e.wheelDelta < 0 && scrollX.value > 0) {
    scrollX.value -= 100;
  } else if (e.wheelDelta > 0 && scrollX.value < tagList.value.length * 100) {
    scrollX.value += 100;
  }
  scrollbarRef.value.setScrollLeft(scrollX.value);
};
</script>

<template>
  <el-scrollbar ref="scrollbarRef" @mousewheel.passive="scrollTag">
    <div class="tags">
      <el-dropdown
        v-for="(item, index) in tagList"
        :key="item.fullPath"
        trigger="contextmenu"
        @command="handleCommand"
        @visible-change="showDropdown"
      >
        <el-tag
          @close="closeTag(index)"
          @click="changeTag(item)"
          :effect="item.fullPath == route.fullPath ? 'dark' : 'plain'"
          :type="item.fullPath == route.fullPath ? '' : 'info'"
          style="margin-right: 20px"
          :closable="item.fullPath !== '/index/homepage'"
        >
          <el-icon size="10" v-if="item.fullPath == route.fullPath">
            <LocationFilled />
          </el-icon>
          <span>
            {{ $t(item.title as string) }}
          </span>
        </el-tag>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              :icon="RefreshLeft"
              :command="{ handle: 'renovate', index }"
              >{{ $t("tagdropdown.flush") }}</el-dropdown-item
            >
            <el-dropdown-item
              :icon="Close"
              :disabled="tagList.length == index + 1"
              :command="{ handle: 'closeAllRightTab', index }"
              >{{ $t("tagdropdown.rightmenu") }}</el-dropdown-item
            >
            <el-dropdown-item
              :icon="CircleClose"
              :disabled="tagList.length == 1"
              :command="{ handle: 'closeAllRightTab', index: 0 }"
              >{{ $t("tagdropdown.allmenu") }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </el-scrollbar>
</template>

<style scoped lang="less">
.el-scrollbar {
  height: 50px;
  box-shadow: 2px 2px 6px 1px #e1e1e1;
  background: #fff;
  z-index: 999;

  // background: rgb(169, 133, 133);
  :deep(.el-scrollbar__bar.is-horizontal) {
    height: 0 !important;
  }

  .tags {
    height: 50px;
    display: flex;
    align-items: center;
    width: auto;
    padding: 0 20px;
  }
}
</style>
